<template>
	<view v-if="dataForm.pk_id" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<view class="swipe-box" v-if="swipeList[0]">
			<sww-swipe 
				@videoPreEnd="videoPreEnd" 
				:list="swipeList" 
				:indicatorDots="true" 
				:previewImg="!dataForm.needBuy" 
				:videoDuration="dataForm.needBuy?15:0">
			</sww-swipe>
			<view class="post_video" v-if="dataForm.needBuy && playEnd">
				<view class="video_main">
					<view class="video_price">
						<text>￥</text>
						<text class="price_num">{{dataForm.price}}</text>
					</view>
					<view class="video_box">
						<view class="video_btn" @click="toPay">付费观看完整内容</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="['parser-box',dataForm.needBuy?'need_buy':'']" v-if="dataForm.content">
			<view style="padding: 0 30rpx;">
				<u-parse :html="dataForm.content"></u-parse>
			</view>
			<!-- <view class="mask" v-if="dataForm.needBuy">
				<view class="mask-box">
				</view>
				<view class="btn_main">
					<view>更多内容请付费观看</view>
					<view style="padding-top: 4rpx;margin-bottom: 60rpx;">金额：￥{{dataForm.price}}</view>
					<view class="btn_box">
						
					<view class="btn" @click="toPay">支付</view>
					</view>
				</view>
			</view> -->
			<view class="sign_post" v-if="dataForm.needBuy">
				<view class="sign_relative"></view>
				<view class="sign_box">
					<view class="sign" @click="toPay">查看更多</view>
				</view>
			</view>
		</view>
		<block v-if="dataForm.pro_list && dataForm.pro_list[0]">
			<view class="rem_title">产品推荐</view>
			<view class="prod_box" v-if="dataForm.pro_list.length == 1">
				<view class="prod_item" @click="openDetail(item)" v-for="(item, index) in dataForm.pro_list" :key="index">
					<image class="img" :src="item.logo"></image>
					<view class="cont_main">
						<view class="title u-line-1">{{ item.name }}</view>
						<view class="cont_bot">
							<view class="price_box">
								<text class="price_num">￥</text>
								<text class="price">{{ item.price || 0 }}</text>
								<text class="mark_price" v-if="item.mark_price > 0">￥{{ item.mark_price }}</text>
							</view>
							<view class="btn">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<view class="lat_box" v-else>
				<view class="lattice_item" @click="openDetail(item)" v-for="(item, index) in dataForm.pro_list" :key="index">
					<image class="img" :src="item.logo"></image>
					<view class="cont">
						<view class="lat_price">
							<text class="sign">￥</text>
							<text class="lat_num">{{ item.price }}</text>
						</view>
						<view class="lat_name u-line-1">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</block>

		<view v-if="dataForm.mode == 6 && dataForm.custom_form_id" class="glo_bot_main" :class="[istab ? 'is_tab' : '']">
			<view class="glo_bot_fix">
				<view class="glo_button" @click="goTurntable">参与活动</view>
			</view>
		</view>

		<tmeplate v-if="dataForm.needBuy">
			<u-popup mode="center" v-model="payVisible" width="80%">
				<view class="pay_popup">
					<sww-pay-type v-model="payType" :price="dataForm.price"></sww-pay-type>
					<view class="pay_tip" @click="goPayVip">购买套餐，享受更多优惠</view>
				</view>
				<view class="pay_box">
					<view class="btn btn_l" @click="payVisible = false">取消</view>
					<view class="btn" @click="submitBuy">支付（￥{{dataForm.price}}）</view>
				</view>
			</u-popup>
		</tmeplate>

		<!-- <sww-pay-class ref="payCheck" @callBack="onPayPrice"></sww-pay-class> -->
	</view>
</template>
<script>
	import { mapActions } from 'vuex'
	import { wxConfig } from '@/mixins/wxConfig';
	import { alipay, payOrder, } from "@/utils/weixinPay";
	export default {
		mixins: [wxConfig],
		props: {
			articleId: {
				type: Number,
				default: 0
			},
			istab: {
				type: Boolean,
				default: false
			} // 是否底部栏页
		},
		data() {
			return {
				payType: 1,
				playEnd: false, // 预览视频结束
				dataForm: {},
				swipeList: [],
				modeObj: {
					1: 4,
					2: 3,
					3: 4,
					4: 1,
					5: 6
				}, // 6:自定义表单
				payVisible: false,
				noPay: false, // 是否消耗次数而不支付
			};
		},
		mounted() {
			this.initData();
		},
		methods: {
			...mapActions(['loadUserCount']),
			initData(noHide) {
				if (noHide) {
					this.$loading();
				}
				this.$resPost('GetInfotainmentInfo', {
						pk_id: this.articleId,
						business_id: null
					})
					.then(({
						data
					}) => {
						data.needBuy = this.judgeBuy(data)
						this.dataForm = {
							...data
						}

						let swipeList = [];
						if (data.voide) {
							swipeList.push({
								video: data.voide
							});
						}
						if (data.img) {
							data.img.split(',').forEach(item => {
								swipeList.push({
									img: item
								});
							});
						}
						this.swipeList = [].concat(swipeList);
						this.$emit('loadFinshed', {
							...data
						});
						if (!noHide) {
							this.$hide();
						}
					})
					.catch(() => {
						this.$hide();
					});
			},
			// 判断是否需要支付
			judgeBuy(data) {
				if (data.price > 0) {
					if (!this.$isLogin()) {
						// 未登录
						return true
					} else if (data.info_pay != 0) {
						// 已购买,不需购买
						return false
					} else if (data.level > 0 && this.vuex_user.level == data.level) {
						return false
					} else {
						return true
						// #ifdef H5
						// h5需要先获取支付和地址的配置
						this.initWxConfig(['chooseWXPay'])
						// #endif
					}
				} else {
					return false
				}
			},
			// 查看关联的差评
			openDetail(item) {
				if (this.dataForm.needBuy) {
					this.toPay()
				} else {
					this.$toProd({
						prodType: this.modeObj[this.dataForm.mode],
						pk_id: item.pk_id
					});
				}
			},
			// 跳转自定义表单
			goTurntable() {
				if (this.dataForm.needBuy) {
					this.toPay()
				} else {
					this.$linkTo(`/package/activity/form/index?id=${this.dataForm.custom_form_id}`);
				}
			},
			// 预览时间到了
			videoPreEnd() {
				this.playEnd = true
			},
			goPayVip() {
				this.$linkTo('/package/user/my-vip/index')
				this.payVisible = false
			},
			// 判断去支付
			toPay() {
				this.$login('initData').then(() => {
					this.noPay = false
					if (this.vuex_user.member_status == 1 && this.vuex_user.residue_degree > 0) {
						uni.showModal({
							title: `支付￥${this.dataForm.price}`,
							content: `是否使用会员免单优惠，剩余${this.vuex_user.residue_degree}次`,
							success: (res) => {
								if (res.confirm) {
									this.noPay = true
								} else {
									this.payVisible = true
								}
							}
						})
					} else {
						this.payVisible = true
					}
				})
			},
			// 确定支付
			submitBuy() {
				this.payVisible = false
				this.$loading()
				let params = {
					appid: this.vuex_business.appid, //商家appId
					openid: '',
					mch_id: '',
					sign_key: '',
					body: '资讯收费',
					info_id: this.dataForm.pk_id,
					money: this.dataForm.price, //总金额
					remark: '', //备注
				};
				// #ifdef H5
				params = {
					...params,
					openid: this.vuex_user.openid,
					mch_id: this.vuex_business.mchid,
					sign_key: this.vuex_business.payment_key,
				}
				// #endif
				// #ifdef MP-WEIXIN
				params = {
					...params,
					openid: this.vuex_user.small_routine,
					mch_id: this.vuex_business.mchid,
					sign_key: this.vuex_business.payment_key,
				}
				// #endif
				// #ifdef APP-PLUS
				// app 微信支付
				params = {
					...params,
					openid: this.vuex_user.otherid,
					mch_id: this.vuex_business.mchid,
					sign_key: this.vuex_business.payment_key,
				}
				// #endif
				// #ifdef MP-ALIPAY
				params = {
					...params,
					openid: this.vuex_user.otherid,
				}
				// #endif
				this.$resPost('AddInfotainmentPayOrder', params).then(({
					data
				}) => {
					data.pk_id = data.order_id
					if (this.noPay) {
						this.updateOrder(data.order_no, {
							pay_type: 8
						})
					} else {
						let opts = {
							totalPrice: this.dataForm.price,
							remark: '资讯订单',
							pay_type: this.payType == 6 ? 1 : this.payType
						}
						this.toSelectPay(data, opts)
					}
				})
			},
			// 判断支付方式
			toSelectPay(params, opts) {
				// 微信
				if (opts.pay_type == 1) {
					payOrder(params).then(() => {
						this.updateOrder(params.order_no, {
							pay_type: opts.pay_type
						})
					}).catch(() => {
						this.$hide()
					})
				} else if (opts.pay_type == 2) {
					// 余额
					this.loadUserCount().then(userCount => {
						if (parseFloat(userCount.balance) >= parseFloat(opts.totalPrice)) { //验证余额
							this._payByBalance(params, opts).then(() => {
								this.updateOrder(params.order_no, {
									pay_type: opts.pay_type
								})
							}).catch(() => {
								this.$hide()
							})
						} else {
							this.$hide()
							this.$toast('余额不足')
						}
					}).catch(() => {
						this.$hide()
					})
				} else if (opts.pay_type == '7') {
					// 支付宝小程序 、App支付宝
					let obj = {
						order_no: params.order_no,
						total_fee: opts.totalPrice,
					}
					alipay(obj).then(() => {
						this.updateOrder(params.order_no, {
							pay_type: opts.pay_type
						})
					}).catch(() => {
						this.$hide()
					})
				} else {
					// 百度、字节
				}
			},
			/**
			 * 余额支付
			 * {pk_id:订单id，order_no:订单id}
			 * */
			_payByBalance(params, opts) {
				return this.$resPost('AddUsersConsume', {
					order_id: params.pk_id,
					order_no: params.order_no,
					trade_no: '',
					type: 1,
					pay_type: 2,
					amount: opts.totalPrice,
					// order_type: opts.order_type,
					status: 1,
					remark: opts.remark || '资讯订单',
				})
			},
			// 更新订单状态
			updateOrder(order_no, opts) {
				this.$resPost('UpdateInfotainmentPayStatus', {
					order_no: order_no,
					pay_status: 1,
					pay_type: opts.pay_type
				}, {}, {
					timeout: '请求超时，请联系客服'
				}).then(() => {
					this.$hide()
					this.initData(true)
					this.$toast('支付成功')
				})
			},
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.swipe-box {
		width: 100%;
		position: relative;
		padding-bottom: 20rpx;

		.post_video {
			position: absolute;
			z-index: 10;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 1);
			display: flex;
			align-items: center;
			justify-content: center;

			.video_price {
				text-align: center;
				color: var(--price);

				.price_num {
					font-size: 40rpx;
				}
			}

			.video_box {
				margin-top: 30rpx;
				display: flex;
				justify-content: center;

				.video_btn {
					background-color: #fff;
					color: var(--color);
					border-radius: 30rpx;
					padding: 10rpx 30rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.parser-box {
		margin-top: 20rpx;
		width: 100%;
		position: relative;
		overflow: hidden;

		&.need_buy {
			max-height: 700rpx;
		}

		video {
			width: 100% !important;
		}

		.sign_post {
			position: absolute;
			// top: 584rpx; // 700 - 116
			bottom: 0;
			left: 0;
			width: 100%;

			.sign_relative {
				height: 40rpx;
				background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0), #fff);
			}

			.sign_box {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 56rpx;

				.sign {
					background-color: var(--color);
					color: #fff;
					width: 176rpx;
					line-height: 50rpx;
					border-radius: 40rpx;
					text-align: center;
				}
			}
		}

		.mask {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;

			.mask-box {
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.3);
				backdrop-filter: saturate(180%) blur(10rpx);
			}

			.btn_main {
				color: #333;
				position: absolute;
				top: 50%;
				left: 0;
				width: 100%;
				transform: translateY(-50%);
				font-size: 36rpx;
				text-align: center;

				.btn_box {
					display: flex;
					justify-content: center;

					.btn {
						width: 400rpx;
						height: 80rpx;
						background-color: var(--color);
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 20rpx;
						border-radius: 40rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}

	.rem_title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx 26rpx;
	}

	// 推荐开始
	.prod_box {
		padding: 0 26rpx;
	}

	.prod_item {
		margin-bottom: 30rpx;
		display: flex;
		height: 100%;
		padding: 20rpx 26rpx;
		background-color: #f6f6f6;
		border-radius: 6rpx;

		.img {
			height: 130rpx;
			width: 130rpx;
			margin-right: 30rpx;
		}

		.cont_main {
			flex: 1;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.cont_main {
		.title {
			font-size: 30rpx;
		}

		.cont_bot {
			display: flex;
			align-items: center;

			.price_box {
				flex: 1;
				overflow: hidden;
				color: var(--price);

				.price_num {
					font-size: 26rpx;
				}

				.price {
					font-size: 32rpx;
					font-weight: bold;
				}

				.mark_price {
					color: #999;
					font-size: 24rpx;
					margin: 0 12rpx;
				}
			}

			.btn {
				background-color: var(--color);
				color: #fff;
				font-size: 26rpx;
				padding: 6rpx 16rpx;
				border-radius: 10rpx;
			}
		}
	}

	.lat_box {
		display: flex;
		padding: 0 30rpx;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.lattice_item {
		width: 330rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;

		.img {
			width: 100%;
			height: 300rpx;
		}

		.cont {
			padding: 14rpx 4rpx 20rpx;

			.lat_price {
				color: var(--color);

				.sign {
					font-size: 24rpx;
					line-height: 1;
				}

				.lat_num {
					line-height: 1;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.lat_name {
				margin-top: 4rpx;
				font-size: 28rpx;
			}
		}
	}

	// 推荐结束
	.glo_bot_main.is_tab {
		.glo_bot_fix {
			bottom: 50px;
		}
	}

	.pay_popup {
		padding: 10rpx 30rpx 20rpx;
	}

	.pay_tip {
		color: var(--color);
		text-decoration: underline;
		text-align: right;
		margin: 20rpx 0;
	}

	.pay_box {
		display: flex;
		background-color: #fff;
		border-top: 1rpx solid #ddd;

		.btn {
			line-height: 80rpx;
			flex: 1;
			overflow: hidden;
			text-align: center;

			&:active {
				opacity: .8;
			}

			&.btn_l {
				border-right: 1rpx solid #ddd;
			}
		}
	}
</style>
